<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="300px">
        <div>
          <el-main>
            <el-input
              v-model="filterText"
              class="w-60 mb-2"
              placeholder="Filter keyword"
              style="width: 200px"
            />

            <el-tree
              ref="treeRef"
              style="max-width: 500px"
              class="filter-tree"
              :data="menuData"
              :props="defaultProps2"
              default-expand-all
              :filter-node-method="filterNode"
              @node-click="handleNodeClick"
            />
          </el-main>
          <!-- 器械分类编辑 -->
          <div>
            <el-dialog
              v-model="Dhk.dialogFormVisible"
              title="分类编辑"
              width="500"
            >
              <el-form :model="form">
                <el-form-item
                  label="上级分类"
                  :label-width="Dhk.formLabelWidth"
                >
                  <el-select
                    v-model="form.apparatusTypeId"
                    placeholder="请选择上级分类"
                  >
                    <el-option :value="0" label="所有分类"></el-option>
                    <el-option
                      v-for="item in apps"
                      :value="item.apparatusTypeId"
                      :label="item.apparatusTypeName"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="名称" :label-width="Dhk.formLabelWidth">
                  <el-input
                    v-model="form.apparatusTypeName"
                    autocomplete="off"
                  />
                </el-form-item>
                <el-form-item
                  label="父级编号"
                  :label-width="Dhk.formLabelWidth"
                >
                  <el-input v-model="form.aid" autocomplete="off" />
                </el-form-item>
                <el-form-item
                  label="上传图片"
                  :label-width="Dhk.formLabelWidth"
                >
                  <el-upload
                    class="avatar-uploader"
                    action="https://localhost:7286/api/Apparatus/UpFileImg"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload"
                  >
                    <img
                      v-if="form.apparatusImg"
                      :src="form.apparatusImg"
                      class="avatar"
                    />
                    <el-icon v-else class="avatar-uploader-icon"
                      ><Plus
                    /></el-icon>
                  </el-upload>
                </el-form-item>
              </el-form>

              <template #footer>
                <div class="dialog-footer">
                  <el-button @click="Dhk.dialogFormVisible = false"
                    >退出</el-button
                  >
                  <el-button type="primary" @click="createApparatustype()">
                    保存
                  </el-button>
                </div>
              </template>
            </el-dialog>
          </div>
        </div>
      </el-aside>
      <el-main style="width: 100%">
        <!-- 搜索 -->
        <div>
          <el-form :inline="true" >
            <el-form-item label="器械名称">
              <el-input
                v-model="page.ApparatusName"
                placeholder="请输入"
                clearable
              />
            </el-form-item>
            <el-form-item label="器械编码">
              <el-input
                v-model="page.ApparatusNo"
                placeholder="请输入"
                clearable
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="getAppautr()">查询</el-button>
              <el-button type="primary" @click="empty()">清空</el-button>
              <el-button type="primary" @click="open(null)">新增</el-button>
            </el-form-item>
          </el-form>
        </div>
        <!-- 显示 -->
        <div style="width: 978px">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column type="index" label="序号" width="55" />
            <el-table-column prop="apparatusImg" label="器械图片" width="120">
              <template #default="scped">
                <img :src="scped.row.apparatusImg" alt="" />
              </template>
            </el-table-column>
            <el-table-column prop="apparatusNo" label="器械编码" width="180" />
            <el-table-column
              prop="apparatusName"
              label="器械名称"
              width="120"
            />
            <el-table-column prop="apparatusNnit" label="单位" width="100" />
            <el-table-column prop="apparatusPrice" label="单价" width="120" />
            <el-table-column
              prop="productionindustry"
              label="生产工商"
              width="120"
            />
            <el-table-column prop="state" label="状态" width="120">
              <template #default="scped">
                <!-- 开关控件 -->
                <el-switch
                  v-model="scped.row.status"
                  class="custom-switch"
                  :active-value="true"
                  :inactive-value="false"
                  @change="handleChangeStatus(scped.row.state)"
                />
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" min-width="120">
              <template #default="scope">
                <el-button link type="primary" @click="open(scope.row)"
                  >编辑</el-button
                >
                <el-button
                  link
                  type="primary"
                  @click="delApparatus(scope.row.apparatusId)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>

        <!-- 新增、编辑 -->
        <div>
          <el-dialog
            v-model="Dhk.dialogApparaFormVisible"
            :title="Dhk.title"
            width="500"
          >
            <el-form :model="form">
              <el-form-item label="器械分类" :label-width="Dhk.formLabelWidth">
                <el-select
                  v-model="appara.apparatusTypeId"
                  placeholder="请选择上级分类"
                >
                  <el-option :value="0" label="所有分类"></el-option>
                  <el-option
                    v-for="item in apps"
                    :value="item.apparatusTypeId"
                    :label="item.apparatusTypeName"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="器械编码" :label-width="Dhk.formLabelWidth">
                <el-input v-model="appara.apparatusNo" autocomplete="off" />
              </el-form-item>
              <el-form-item label="器械名称" :label-width="Dhk.formLabelWidth">
                <el-input v-model="appara.apparatusName" autocomplete="off" />
              </el-form-item>
              <el-form-item label="器械型号" :label-width="Dhk.formLabelWidth">
                <el-input v-model="appara.apparatusModel" autocomplete="off" />
              </el-form-item>
              <el-form-item label="单位" :label-width="Dhk.formLabelWidth">
                <el-input v-model="appara.apparatusNnit" autocomplete="off" />
              </el-form-item>
              <el-form-item label="单价" :label-width="Dhk.formLabelWidth">
                <el-input v-model="appara.apparatusPrice" autocomplete="off" />
              </el-form-item>
              <el-form-item label="耐用属性" :label-width="Dhk.formLabelWidth">
                <el-radio-group v-model="appara.durableproperties">
                  <el-radio :value="false" label="耐用品">耐用品</el-radio>
                  <el-radio :value="true" label="一次性用品"
                    >一次性用品</el-radio
                  >
                </el-radio-group>
              </el-form-item>
            </el-form>
            <template #footer>
              <div class="dialog-footer">
                <el-button @click="Dhk.dialogApparaFormVisible = false"
                  >退回</el-button
                >
                <el-button type="primary" @click="save()"> 保存 </el-button>
              </div>
            </template>
          </el-dialog>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, watch } from "vue";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import type { TreeInstance } from "element-plus";
import axios from "axios";
import { Plus } from "@element-plus/icons-vue";
import type { UploadProps } from "element-plus";
import { Check, Close } from "@element-plus/icons-vue";
const router = useRouter();

//#region 器械分类
//器械数
const defaultProps2 = {
  children: "children",
  label: "label",
  value: "value",
};
const menuData = ref([]);
// 显示器械树
const getMenuData = () => {
  axios
    .get(
      "https://localhost:7224/api/ApparatusType/QueryApparatusTreeType?Aid=0"
    )
    .then((res) => {
      menuData.value = res.data.data;
    });
};

onMounted(() => {
  getMenuData();
  getApps();
  getAppautr();
});

const filterText = ref("");
const treeRef = ref<TreeInstance>();

const defaultProps = {
  children: "children",
  label: "label",
};

watch(filterText, (val) => {
  treeRef.value!.filter(val);
});

const filterNode = (value: string, data: Tree) => {
  if (!value) return true;
  return data.label.includes(value);
};

// 对话框
const Dhk = reactive({
  dialogFormVisible: false,
  dialogApparaFormVisible: false,
  formLabelWidth: "120px",
  title: "",
  isNaN: true,
});

const form = reactive({
  apparatusTypeId: 0,
  apparatusTypeName: "",
  apparatusImg: "",
  aid: 0, //父级id
});
const handleNodeClick = () => {
  Dhk.dialogFormVisible = true;
};

const apps = ref([]);
const getApps = () => {
  axios
    .get("https://localhost:7224/api/ApparatusType/QueryApparatusType")
    .then((res) => {
      apps.value = res.data.data;
    });
};

const handleAvatarSuccess: UploadProps["onSuccess"] = (
  response,
  uploadFile
) => {
  // console.log(response, "7687");
  form.apparatusImg = response;
};

const beforeAvatarUpload: UploadProps["beforeUpload"] = (rawFile) => {
  if (rawFile.type !== "image/jpg") {
    ElMessage.error("头像图片必须是 jpg 格式!");
    return false;
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error("头像图片大小不能超过 2MB!");
    return false;
  }
  return true;
};

// 添加器械分类
const createApparatustype = () => {
  axios
    .post("https://localhost:7286/api/Apparatus/CreateApparatusType", form)
    .then((res) => {
      if (res.data.code == 100) {
        ElMessage.success(res.data.msg);
        Dhk.dialogFormVisible = false;
        getApps();
      } else {
        ElMessage.error(res.data.msg);
      }
    });
};

//#endregion

//#region   器械
const tableData = ref([]);
const page = reactive({
  ApparatusNo: "",
  ApparatusName: "",
});

//获取器械
const getAppautr = () => {
  axios
    .get("https://localhost:7224/api/Apparatus", { params: page })
    .then((res) => {
      console.log(res.data.data, "7687");
      tableData.value = res.data.data;
    });
};

//清空搜索条件
const empty = () => {
  page.ApparatusNo = "";
  page.ApparatusName = "";
  getAppautr();
};

// 添加、编辑器械
const appara = reactive({
  apparatusId: 0,
  apparatusNo: "",
  apparatusName: "",
  apparatusModel: "",
  apparatusNnit: "",
  apparatusPrice: "",
  productionindustry: "",
  state: false,
  isDeletes: false,
  durableproperties: false,
  apparatusTypeId: 0,
});

//打开弹出框
const open = (row: any) => {
  if (row == null) {
    Dhk.dialogApparaFormVisible = true;
    Dhk.title = "添加器械";
    Dhk.isNaN = true;
    appara.apparatusId = 0;
    appara.apparatusNo = "";
    appara.apparatusName = "";
    appara.apparatusModel = "";
    appara.apparatusNnit = "";
    appara.apparatusPrice = "";
    appara.productionindustry = "";
    appara.state = false;
    appara.isDeletes = false;
    appara.durableproperties = false;
    appara.apparatusTypeId = 0;
  } else {
    Dhk.dialogApparaFormVisible = true;
    Dhk.title = "编辑器械";
    Dhk.isNaN = false;
    appara.apparatusId = row.apparatusId;
    appara.apparatusNo = row.apparatusNo;
    appara.apparatusName = row.apparatusName;
    appara.apparatusModel = row.apparatusModel;
    appara.apparatusNnit = row.apparatusNnit;
    appara.apparatusPrice = row.apparatusPrice;
    appara.productionindustry = row.productionindustry;
    appara.state = row.state;
    appara.isDeletes = row.isDeletes;
    appara.durableproperties = row.durableproperties;
    appara.apparatusTypeId = row.apparatusTypeId;
  }
};

//新增、编辑器械数据
const save = () => {
  if (appara.apparatusNo == "") {
    ElMessage.error("器械编号不能为空");
    return;
  }
  if (appara.apparatusName == "") {
    ElMessage.error("器械名称不能为空");
    return;
  }
  if (appara.apparatusModel == "") {
    ElMessage.error("器械型号不能为空");
    return;
  }
  if (appara.apparatusNnit == "") {
    ElMessage.error("单位不能为空");
    return;
  }
  if (Dhk.isNaN) {
    axios
      .post("https://localhost:7286/api/Apparatus/CreateApparatus", appara)
      .then((res) => {
        if (res.data.code == 100) {
          ElMessage.success(res.data.msg);
          Dhk.dialogApparaFormVisible = false;
          getAppautr();
        } else {
          ElMessage.error(res.data.msg);
        }
      });
  } else {
    axios
      .put("https://localhost:7286/api/Apparatus/UpdataApparatus", appara)
      .then((res) => {
        console.log(res,"修改");
        if (res.data.code == 400) {
          ElMessage.success(res.data.msg);
          Dhk.dialogApparaFormVisible = false;
          getAppautr();
        } else {
          ElMessage.error(res.data.msg);
        }
      });
  }
};

// 逻辑删除--器械数据
const delApparatus = (apparatusId: any) => {
  axios
    .put("https://localhost:7286/api/Apparatus/DelApparatus", {
      apparatusId: apparatusId,
    })
    .then((res) => {
      if (res.data.code == 300) {
        ElMessage.success(res.data.msg);

        getAppautr();
      } else {
        ElMessage.error(res.data.msg);
      }
    });
};

// 状态变更处理
const handleChangeStatus = (row: any) => {
  // alert(row.status);
  /* if (row.status) {
  row.status = false;
} else {
  row.status = true;
} */
  console.log(
    `设备 ${row.apparatusName} 状态变更为：${row.status ? "开启" : "关闭"}`
  );
};
//#endregion
</script>

<style scoped>
</style>